<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<view class="info">
            <view class="info-t" style="margin-top:40upx;">我的账户</view>
            <view class="info-account flex-y-center">
                <image class="info-bg" :src="data.__wxapp_img.balance.recharge_bg.url"></image>
                <view class="flex-row w-100">
                    <view class="flex-grow-1 flex-row">
                        <view class="flex-grow-0">
                            <image :src="data.__wxapp_img.balance.recharge.url" style="width:72upx;height:72upx;margin-right:20upx;"></image>
                        </view>
                        <view class="flex-grow-1" style="font-size:19pt;">余额</view>
                    </view>
                    <view class="flex-grow-0 flex-y-center" style="font-size:21pt;">￥{{data.__user_info.money}}</view>
                </view>
            </view>
            <view class="info-t" style="margin-top:56upx;">充值金额</view>
            <view class="list flex-row">
                <view @tap="click" :class="['one flex-x-center', data.selected==index?'active':'']" :data-index="index" v-for="(item,index) in data.list" :key="item.id">
                    <view v-if="item.send_price>0">
                        <view class="flex-x-center one-1">{{item.pay_price}}</view>
                        <view class="flex-x-center one-2 fs-sm">送{{item.send_price}}</view>
                    </view>
                    <view class="flex-y-center" v-else>
                        <view class="flex-x-center one-1">{{item.pay_price}}</view>
                    </view>
                </view>
            </view>
            <view @tap="click" class="one-type" data-index="-1" v-if="data.balance.type==1">
                <view class="flex-y-center" style="height:100%">
                    <input @input="input" class="r-input" placeholder="手动输入充值金额" placeholderClass="r-input-p" type="number" :value="data.money"></input>
                </view>
            </view>
            <view @tap="pay" class="recharge-btn flex-x-center flex-y-center">立即充值</view>
            <view class="info-t" style="margin-top:72upx;">充值说明</view>
            <view class="info-t" style="border:0;line-height:1.5">
                <text>{{data.balance.help}}</text>
            </view>
        </view>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	import Vue from 'vue'
	function e(e) {
    Vue.prototype.getApp.onShowData || (Vue.prototype.getApp.onShowData = {}), Vue.prototype.getApp.onShowData.scene = e;
}
	export default {
		data() {
			return {
				data: {
        selected: -1
    },
			};
		},
		onLoad: function(e) {myVue = this;
        myVue.getApp.page.onLoad(this, e);
        var t = this;
        myVue.getApp.core.showLoading({
            title: "加载中"
        }), myVue.getApp.request({
            url: myVue.getApp.api.recharge.list,
            success: function(e) {
                var a = e.data;
                a.balance && 0 != a.balance.status || t.getApp.core.showModal({
                    title: "提示",
                    content: "充值功能未开启，请联系管理员！",
                    showCancel: !1,
                    success: function(e) {
                        e.confirm && t.getApp.core.navigateBack({
                            delta: 1
                        });
                    }
                }), t.setData(e.data);
            },
            complete: function(e) {
                t.getApp.core.hideLoading();
            }
        });
    },
    onReady: function() {
        myVue.getApp.page.onReady(this);
    },
    onShow: function() {
        myVue.getApp.page.onShow(this);
    },
    onHide: function() {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function() {
        myVue.getApp.page.onUnload(this);
    },
		methods: {
			click: function(e) {
        this.setData({
            selected: e.currentTarget.dataset.index
        });
    },
    pay: function(t) {
        var a = this, n = {}, o = a.data.selected;
        if (-1 == o) {
            var p = a.data.money;
            if (p < .01) return void myVue.getApp.core.showModal({
                title: "提示",
                content: "充值金额不能小于0.01",
                showCancel: !1
            });
            n.pay_price = p, n.send_price = 0;
        } else {
            var c = a.data.list;
            n.pay_price = c[o].pay_price, n.send_price = c[o].send_price;
        }
        n.pay_price ? (n.pay_type = "WECHAT_PAY", myVue.getApp.core.showLoading({
            title: "提交中"
        }), myVue.getApp.request({
            url: myVue.getApp.api.recharge.submit,
            data: n,
            method: "POST",
            success: function(t) {
                if (a.getApp.page.bindParent({
                    parent_id: a.getApp.core.getStorageSync(a.getApp.const.PARENT_ID),
                    condition: 1
                }), 0 == t.code) return setTimeout(function() {
                    a.getApp.core.hideLoading();
                }, 1e3), e("pay"), void a.getApp.core.requestPayment({
                    _res: t,
                    timeStamp: t.data.timeStamp,
                    nonceStr: t.data.nonceStr,
                    package: t.data.package,
                    signType: t.data.signType,
                    paySign: t.data.paySign,
                    success: function(e) {},
                    fail: function(e) {},
                    complete: function(e) {
                        "requestPayment:fail" != e.errMsg && "requestPayment:fail cancel" != e.errMsg ? (a.getApp.page.bindParent({
                            parent_id: a.getApp.core.getStorageSync(a.getApp.const.PARENT_ID),
                            condition: 2
                        }), a.getApp.core.showModal({
                            title: "提示",
                            content: "充值成功",
                            showCancel: !1,
                            confirmText: "确认",
                            success: function(e) {
                                e.confirm && a.getApp.core.navigateBack({
                                    delta: 1
                                });
                            }
                        })) : a.getApp.core.showModal({
                            title: "提示",
                            content: "订单尚未支付",
                            showCancel: !1,
                            confirmText: "确认"
                        });
                    }
                });
                a.getApp.core.showModal({
                    title: "提示",
                    content: t.msg,
                    showCancel: !1
                }), a.getApp.core.hideLoading();
            }
        })) : a.getApp.core.showModal({
            title: "提示",
            content: "请选择充值金额",
            showCancel: !1
        });
    },
    input: function(e) {
        this.setData({
            money: e.detail.value
        });
    }
		},
	}
</script>

<style scoped>
.info {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 0 12upx;
    border-top: 1upx solid #e2e2e2;
}

.info-t {
    color: #999;
    margin: 24upx 12upx;
    line-height: 1;
    padding: 0 24upx;
    border-left: 6upx solid #ff4544;
}

.list {
    margin-bottom: 16upx;
    flex-wrap: wrap;
}

.one {
    width: 218upx;
    border: 1upx solid #ccc;
    border-radius: 16upx;
    padding: 32upx 0;
    margin-right: 12upx;
    margin-left: 12upx;
    margin-bottom: 24upx;
    position: relative;
}

.one-1 {
    color: #666;
}

.one-2 {
    color: #999;
}

.one.active .one-1 {
    color: #ff4544;
}

.one.active .one-2 {
    color: #ff4544;
}

.recharge-btn {
    width: 702upx;
    height: 96upx;
    margin: 56upx 12upx 0 12upx;
    border-radius: 48upx;
    background-color: #ff4544;
    color: #fff;
}

.r-input {
    height: 88upx;
    border-radius: 16upx;
    color: #666;
    line-height: 88upx;
    padding: 0 28upx;
    width: 650upx;
}

.r-input-p {
    line-height: 88upx;
    color: #ddd;
}

.active {
    border-color: #ff4544;
    background-color: #fff6f6;
}

.info-account {
    margin: 8upx 12upx 32upx 12upx;
    width: 702upx;
    height: 160upx;
    position: relative;
    padding: 0 56upx 0 40upx;
    color: #666;
    z-index: 10;
}

.info-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.one-type {
    width: 702upx;
    height: 100upx;
    margin: 0 12upx;
    border: 1upx solid #ccc;
    border-radius: 16upx;
    color: #666;
}
</style>
